<template>
	<view class="">
		<view class="common-header">
			<view class="headlanng_box">
				<view class="back_box" v-if="toback=='1'" @click="gotoback()">
					<image src="@/static/img/back.png" class="back"></image>
				</view>
				<view class="back_box bgboxbp" v-if="headtitle">
					{{$store.state.devAddress?maskAddress($store.state.devAddress):$t('head7')}}
				</view>
			</view>
			<view :class="headtitle?'texthead thd':'thd'">{{title}}</view>
			<view class="headlanng_box">
				<view class="headlanng" @click="langShow=true">
					<image src="@/static/img/home_Group.png" mode=""></image>
					<text>{{langtxt}}</text>
				</view>
			</view>
		</view>
		<u-popup :show="langShow" :round="10" @close="close" mode="center">
			<view class="probox">
				<view class="probox_item" @click="confirm(item)" v-for="(item,index) in columns">{{item.label}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'CommonHeader',
		data() {
			return {
				langShow: false,
				langtxt: '中文',
				columns: [{
					label: '中文',
					code: 'zh-Hans',
					id: 100
				}, {
					label: 'English',
					code: 'en',
					id: 300
				}, {
					label: '한국어',
					code: 'ko',
					id: 400
				}, {
					label: '日本語',
					code: 'ja',
					id: 500
				}],

			}
		},
		props: {
			// 可以定义一些需要传递的属性，如标题等
			title: {
				type: String,
				default: function() {
					return this.$t('head6');
				},
			},
			toback: {
				type: String,
				default: '1'
			},
			headtitle: {
				type: Boolean,
				default: false
			},
		},
		mounted() {
			const lang = uni.getStorageSync('language') || 'zh-Hans'; //获取缓存的语言设置
			console.log(lang)
			this.columns.forEach(item => {
				if (item.code == lang) {
					this.langtxt = item.label
				}
			})
		},
		watch: {
			"$store.state.language": {
				handler: function(newVal, oldVal) {
					console.log(newVal, oldVal)
					this.columns.forEach(item => {
						if (item.code == newVal) {
							this.langtxt = item.label
						}
					})
				}
			},

		},
		methods: {
			setTitle() {
				uni.setTabBarItem({
					// 修改底部导航
					index: 0,
					text: this.$t('rp1'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 1,
					text: this.$t('rp2'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 2,
					text: this.$t('rp3'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 3,
					text: this.$t('rp4'),
				});
			},
			gotoback() {
				uni.navigateBack()
			},
			confirm(e) {
				this.langShow = false;
				this.langtxt = e.label
				this.$store.commit('changeLanguage', e.code);
				uni.setStorage({
					key: 'language',
					data: e.code
				})
				this.$i18n.locale = e.code
				uni.setLocale(e.code)
				this.setTitle() //动态修改头部和tabBar
			},
			close(e) {
				this.langShow = false
			},

			maskAddress(address) {
				if (!address) return;
				return address.substr(0, 2) + "****" + address.substr(-4);
			},
		}
	}
</script>

<style scoped lang="scss">
	.common-header {
		/* 样式按需定义 */
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #000000;
		text-align: center;
		color: #ffffff;
		font-size: 48rpx;
		font-weight: 700;
		padding: 0 16rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;

		.headlanng_box {
			// width: 120rpx;

			.back_box {
				padding: 16rpx 0;
				box-sizing: border-box;
				display: flex;
				font-size: 28rpx;

				.back {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.bgboxbp {
				font-size: 24rpx;
				padding: 0 10rpx !important;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				border: 2rpx solid #ffffff;
			}
		}

		.texthead {
			font-size: 40rpx;
		}

		.thd {
			font-size: 38rpx;
			width: 100%;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏溢出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示被隐藏的部分 */
		}

		.headlanng {
			width: 120rpx;
			height: 40rpx;
			border-radius: 20rpx;
			opacity: 1;
			border: 2rpx solid #ffffff;
			font-size: 18rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 13rpx;
				height: 7rpx;
				margin-right: 8rpx;
			}
		}
	}

	.probox {
		text-align: center;
		color: #000000;
		width: 60vw;

		.probox_item {
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			color: #000000;
			border-bottom: 1rpx solid #999999;

		}

		.probox_item:last-child {
			border: 0;
		}

		.probox_item:hover {
			background-color: #999999;
		}
	}
</style>